$(function () {
  var myChart = echarts.init(document.getElementById('main'));
  var myChart2 = echarts.init(document.getElementById('main2'));

  option = {
    backgroundColor: '#0f375f',
    title: {
      text: '2019年手机品牌数量',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20,
      },
      top: '5%',
      left: '10%',
    },
    legend: {
      data: ['库存', '销量'],
      x: '150px', // 对齐方式
      itemGap: 100, // item之间的距离javascript:;
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ebf8ac" //X轴文字颜色
        }
      },
      axisLine: {
        lineStyle: {
          color: '#01FCE3'
        }
      },
    },
    yAxis: {
      type: 'value',
      max: 600,
      axisLabel: {
        show: true,
        formatter: "{value} 台", //右侧Y轴文字显示
        textStyle: {
          color: "#ebf8ac"
        }
      },
      axisLine: {
        lineStyle: {
          color: '#FFFFFF'
        }
      },
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#f25d2d'
                },
                  {
                    offset: 1,
                    color: '#11ded6'
                  }
                ])
          }
        }
      },
      {
        type: 'line',
        symbolSize: 20 // 控制线条上 点 的大小
      }
    ]
  };
  myChart.setOption(option);
  myChart.showLoading();

  option2 = {
    backgroundColor:"#0B1837",
    color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
    title: {
      text: '2019年手机品牌销售金额',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20,
      },
      top: '5%',
      left: '30%',
    },
    grid: {
      left: -100,
      top: 50,
      bottom: 10,
      right: 10,
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)"
    },
    legend: {
      type: "scroll",
      orient: "vartical",
      top: "center",
      right: "15",
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 16,
      textStyle: {
        color: '#A3E2F4',
        fontSize: 12,
        fontWeight: 0
      },
      data: []
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: 'category',
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: "#0B4A6B",
        margin: 8,
        fontSize: 16
      },
    },
    radiusAxis: {
      min: 40,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B3E5E",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        formatter: '{value} %',
        show: false,
        padding: [0, 0, 20, 0],
        color: "#0B3E5E",
        fontSize: 16
      },
      splitLine: {
        lineStyle: {
          color: "#0B3E5E",
          width: 2,
          type: "solid"
        }
      }
    },
    calculable: true,
    series: [{
      type: 'pie',
      radius: ["5%", "10%"],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: "#0B4A6B"
          }
        }
      }]
    }, {
      type: 'pie',
      radius: ["90%", "95%"],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      name: "",
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: "#0B4A6B"
          }
        }
      }]
    },{
      stack: 'a',
      type: 'pie',
      radius: ['20%', '80%'],
      roseType: 'area',
      zlevel:10,
      label: {
        normal: {
          show: true,
          formatter: "{c}",
          textStyle: {
            fontSize: 12,
          },
          position: 'outside'
        },
        emphasis: {
          show: true
        }
      },
      labelLine: {
        normal: {
          show: true,
          length: 20,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: []
    }, ]
  };
  myChart2.setOption(option2);
  myChart2.showLoading();

  $.ajax({
    type: "post",
    url: "/echarts",
    dataType:"json",
    success: function (result) {
      var brand = [];
      var residue = [];
      var sales = [];
      var money = [];
      var earnings = 0;
      $.each(result, function(index, item) {
        brand.push(item.pb_name);
        residue.push(item.residue);
        sales.push(item.sales);
        earnings += item.money;
        money.push({
          name: item.pb_name,
          value: item.money
        });
      });
      myChart.hideLoading();
      myChart.setOption({        //加载数据图表
        xAxis: {
          data: brand
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: sales
        },{
          name: '库存',
          data: residue
        }
        ]
      });
      myChart2.hideLoading();
      myChart2.setOption({
        legend:{
          data:brand
        },
        series:[{},{},{
          data:money
        }]
      });//加载数据图表
      $("#money").text(earnings);
      $("#money2").text("你一共收益 "+earnings+" 元")
    },
    error: function (result) {
      console.log(0)
    }
  });

})
